import React from 'react';
import { motion } from 'framer-motion';
import { FaCode, FaDesktop, FaMobileAlt, FaServer, FaDatabase, FaCloud } from 'react-icons/fa';
import Breadcrumb from '../components/common/Breadcrumb';
import BackToTop from '../components/common/BackToTop';
import './AboutPage.css';

const AboutPage = () => {
  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  // 技能数据
  const skills = [
    {
      category: '前端开发',
      icon: <FaCode />,
      items: [
        { name: 'HTML/CSS', level: 95 },
        { name: 'JavaScript', level: 90 },
        { name: 'React', level: 85 },
        { name: 'Vue.js', level: 80 },
        { name: 'TypeScript', level: 75 },
        { name: 'Next.js', level: 70 }
      ]
    },
    {
      category: '后端开发',
      icon: <FaServer />,
      items: [
        { name: 'Node.js', level: 85 },
        { name: 'Express', level: 80 },
        { name: 'Python', level: 75 },
        { name: 'Django', level: 70 },
        { name: 'Java', level: 65 },
        { name: 'Spring Boot', level: 60 }
      ]
    },
    {
      category: '数据库',
      icon: <FaDatabase />,
      items: [
        { name: 'MongoDB', level: 80 },
        { name: 'MySQL', level: 75 },
        { name: 'PostgreSQL', level: 70 },
        { name: 'Redis', level: 65 },
        { name: 'Firebase', level: 60 }
      ]
    },
    {
      category: '移动开发',
      icon: <FaMobileAlt />,
      items: [
        { name: 'React Native', level: 80 },
        { name: 'Flutter', level: 70 },
        { name: 'iOS (Swift)', level: 60 },
        { name: 'Android (Kotlin)', level: 55 }
      ]
    },
    {
      category: 'DevOps',
      icon: <FaCloud />,
      items: [
        { name: 'Docker', level: 75 },
        { name: 'Kubernetes', level: 65 },
        { name: 'CI/CD', level: 70 },
        { name: 'AWS', level: 60 },
        { name: 'Azure', level: 55 }
      ]
    },
    {
      category: 'UI/UX',
      icon: <FaDesktop />,
      items: [
        { name: 'Figma', level: 75 },
        { name: 'Adobe XD', level: 70 },
        { name: 'Sketch', level: 65 },
        { name: '用户研究', level: 60 },
        { name: '交互设计', level: 70 }
      ]
    }
  ];

  // 工作经历
  const experiences = [
    {
      company: '科技创新公司',
      position: '高级前端开发工程师',
      period: '2021年 - 至今',
      description: '负责公司核心产品的前端架构设计和开发，带领团队实现了多个重要功能模块，提升了产品性能和用户体验。',
      achievements: [
        '重构了前端架构，将加载时间减少了40%',
        '实现了复杂的数据可视化模块，提高了用户数据理解能力',
        '开发了组件库，提升了团队开发效率',
        '引入了自动化测试，将bug率降低了30%'
      ]
    },
    {
      company: '互联网金融公司',
      position: '全栈开发工程师',
      period: '2018年 - 2021年',
      description: '参与公司金融产品的全栈开发，负责前端界面和后端API的设计与实现，确保系统安全和性能。',
      achievements: [
        '开发了实时交易监控系统，提高了异常检测效率',
        '设计并实现了用户认证和授权系统',
        '优化了数据库查询，提升了系统响应速度',
        '参与了微服务架构的设计和实现'
      ]
    },
    {
      company: '电子商务初创公司',
      position: '前端开发工程师',
      period: '2016年 - 2018年',
      description: '作为初创团队的一员，参与电商平台从零到一的开发过程，负责用户界面和交互体验的实现。',
      achievements: [
        '开发了响应式电商平台，支持多设备访问',
        '实现了购物车和结账流程，提升了转化率',
        '设计并开发了产品推荐系统',
        '优化了移动端性能，提升了用户留存率'
      ]
    }
  ];

  // 教育背景
  const education = [
    {
      institution: '北京大学',
      degree: '计算机科学硕士',
      period: '2014年 - 2016年',
      description: '专注于人工智能和数据分析领域，参与了多个研究项目，发表了2篇学术论文。'
    },
    {
      institution: '清华大学',
      degree: '软件工程学士',
      period: '2010年 - 2014年',
      description: '学习了软件开发的基础理论和实践技能，获得了优秀毕业生称号。'
    }
  ];

  // 证书和奖项
  const certifications = [
    {
      name: 'AWS 认证解决方案架构师',
      issuer: 'Amazon Web Services',
      year: '2022年'
    },
    {
      name: 'Google Professional Cloud Developer',
      issuer: 'Google Cloud',
      year: '2021年'
    },
    {
      name: 'MongoDB 认证开发者',
      issuer: 'MongoDB Inc.',
      year: '2020年'
    },
    {
      name: '最佳技术创新奖',
      issuer: '中国软件开发者大会',
      year: '2019年'
    }
  ];

  return (
    <div className="about-page">
      <Breadcrumb />
      
      <motion.div 
        className="container"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <motion.div className="about-header" variants={itemVariants}>
          <div className="about-image-container">
            <img 
              src="https://pic.imgdb.cn/item/66729435d9c307b7e9620e1f.png" 
              alt="个人照片" 
              className="about-image"
            />
          </div>
          <div className="about-intro">
            <h1 className="about-name">batype</h1>
            <h2 className="about-title">全栈开发工程师 / UI设计师</h2>
            <p className="about-bio">
              我是一名拥有5年经验的全栈开发工程师，专注于创建美观、高性能的Web应用和移动应用。我热爱技术创新，并致力于解决复杂的业务问题。
            </p>
            <div className="about-contact">
              <a href="mailto:contact@example.com" className="contact-link">contact@example.com</a>
              <span className="contact-divider">|</span>
              <a href="tel:+8612345678901" className="contact-link">+86 123 4567 8901</a>
            </div>
          </div>
        </motion.div>
        
        <motion.section className="about-section" variants={itemVariants}>
          <h2 className="section-title">关于我</h2>
          <div className="about-content">
            <p>
              作为一名充满激情的技术专家，我在前端和后端开发领域都有深入的经验。我喜欢挑战复杂的技术问题，并寻找创新的解决方案。我相信良好的用户体验是成功产品的关键，因此我总是将用户需求放在首位。
            </p>
            <p>
              在我的职业生涯中，我参与了各种规模的项目，从小型创业公司到大型企业应用。我善于在快节奏的环境中工作，并能够快速适应新技术和工作方法。我注重代码质量和最佳实践，同时保持对新技术趋势的关注。
            </p>
            <p>
              除了技术技能外，我还具备良好的沟通能力和团队协作精神。我享受与设计师、产品经理和其他开发人员合作，共同打造出色的产品。我相信持续学习和知识分享是专业成长的关键，因此我经常参加技术会议和社区活动。
            </p>
          </div>
        </motion.section>
        
        <motion.section className="about-section" variants={itemVariants}>
          <h2 className="section-title">技能树</h2>
          <div className="skills-container">
            {skills.map((skillGroup, index) => (
              <div key={index} className="skill-group">
                <div className="skill-group-header">
                  <div className="skill-icon">{skillGroup.icon}</div>
                  <h3 className="skill-category">{skillGroup.category}</h3>
                </div>
                <div className="skill-items">
                  {skillGroup.items.map((skill, i) => (
                    <div key={i} className="skill-item">
                      <div className="skill-info">
                        <span className="skill-name">{skill.name}</span>
                        <span className="skill-level">{skill.level}%</span>
                      </div>
                      <div className="skill-bar">
                        <div 
                          className="skill-progress" 
                          style={{ width: `${skill.level}%` }}
                        ></div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </motion.section>
        
        <motion.section className="about-section" variants={itemVariants}>
          <h2 className="section-title">工作经历</h2>
          <div className="timeline">
            {experiences.map((exp, index) => (
              <div key={index} className="timeline-item">
                <div className="timeline-dot"></div>
                <div className="timeline-content">
                  <div className="timeline-header">
                    <h3 className="timeline-title">{exp.position}</h3>
                    <span className="timeline-period">{exp.period}</span>
                  </div>
                  <h4 className="timeline-subtitle">{exp.company}</h4>
                  <p className="timeline-description">{exp.description}</p>
                  <ul className="timeline-achievements">
                    {exp.achievements.map((achievement, i) => (
                      <li key={i}>{achievement}</li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </motion.section>
        
        <motion.section className="about-section" variants={itemVariants}>
          <h2 className="section-title">教育背景</h2>
          <div className="timeline">
            {education.map((edu, index) => (
              <div key={index} className="timeline-item">
                <div className="timeline-dot"></div>
                <div className="timeline-content">
                  <div className="timeline-header">
                    <h3 className="timeline-title">{edu.degree}</h3>
                    <span className="timeline-period">{edu.period}</span>
                  </div>
                  <h4 className="timeline-subtitle">{edu.institution}</h4>
                  <p className="timeline-description">{edu.description}</p>
                </div>
              </div>
            ))}
          </div>
        </motion.section>
        
        <motion.section className="about-section" variants={itemVariants}>
          <h2 className="section-title">证书与成就</h2>
          <div className="certifications-grid">
            {certifications.map((cert, index) => (
              <div key={index} className="certification-card">
                <h3 className="certification-name">{cert.name}</h3>
                <div className="certification-details">
                  <span className="certification-issuer">{cert.issuer}</span>
                  <span className="certification-year">{cert.year}</span>
                </div>
              </div>
            ))}
          </div>
        </motion.section>
      </motion.div>
      
      <BackToTop />
    </div>
  );
};

export default AboutPage;
